<template>
	<view class="content">
		<view class="stick">
			<view class="time" @click="Open">
				<view class="title font30">
					{{time}}
				</view>
				<view class="icon">


					<image src="../../../static/images/shopowner/1.png" mode="aspectFit"></image>


					<image src="../../../static/images/shopowner/1.png" mode="aspectFit"></image>

					<image src="/shopowner/static/images/1.png" mode="aspectFit"></image>



					<image src="/shopowner/static/images/1.png" mode="aspectFit"></image>

				</view>
			</view>
		</view>
		<view class="table">
			<view class="item font24" v-for="(item,index) in table" :key="index">
				{{item}}
			</view>
		</view>
		<view class="list" v-for="(item,index) in list" :key="index">
			<view class="type font24">
				{{item.type}}
			</view>
			<view class="name font24">
				{{item.name}}
			</view>
			<view class="attendance font24">
				{{item.attendance}}
			</view>
			<view class="overtime font24">
				{{item.overtime}}
			</view>
			<view class="basic font24">
				{{item.basic}}
			</view>
			<view class="commission font24">
				{{item.commission}}
			</view>
			<view class="salary font24">
				{{item.salary}}
			</view>
		</view>
		<yt-dateTimePicker ref="timeShow" @submit="starTimes" :start-year="2000" :end-year="2099" :time-init="time"
			:time-hide="[true, true, true, false, false, false]" :time-label="['年', '月', '日']" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				time: '',
				table: [
					'员工类型', '员工姓名', '出勤天数', '加班天数', '基本工资', '提成', '总工资',
				],
				list: [{
					type: '工资',
					name: '张小乔',
					attendance: '28',
					overtime: '2',
					basic: '2800',
					commission: '2800.00',
					salary: '6666.66'
				}, {
					type: '工资',
					name: '张小乔',
					attendance: '28',
					overtime: '2',
					basic: '2800',
					commission: '2800.00',
					salary: '6666.66'
				}, {
					type: '工资',
					name: '张小乔',
					attendance: '28',
					overtime: '2',
					basic: '2800',
					commission: '2800.00',
					salary: '6666.66'
				}, {
					type: '工资',
					name: '张小乔',
					attendance: '28',
					overtime: '2',
					basic: '2800',
					commission: '2800.00',
					salary: '6666.66'
				}, {
					type: '工资',
					name: '张小乔',
					attendance: '28',
					overtime: '2',
					basic: '2800',
					commission: '2800.00',
					salary: '6666.66'
				}, {
					type: '工资',
					name: '张小乔',
					attendance: '28',
					overtime: '2',
					basic: '2800',
					commission: '2800.00',
					salary: '6666.66'
				}, {
					type: '工资',
					name: '张小乔',
					attendance: '28',
					overtime: '2',
					basic: '2800',
					commission: '2800.00',
					salary: '6666.66'
				}, {
					type: '工资',
					name: '张小乔',
					attendance: '28',
					overtime: '2',
					basic: '2800',
					commission: '2800.00',
					salary: '6666.66'
				}, {
					type: '工资',
					name: '张小乔',
					attendance: '28',
					overtime: '2',
					basic: '2800',
					commission: '2800.00',
					salary: '6666.66'
				}, {
					type: '工资',
					name: '张小乔',
					attendance: '28',
					overtime: '2',
					basic: '2800',
					commission: '2800.00',
					salary: '6666.66'
				}]
			};
		},
		onLoad() {
			this.getCurrentTime()
		},
		methods: {
			getCurrentTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				const hours = String(now.getHours()).padStart(2, '0');
				const minutes = String(now.getMinutes()).padStart(2, '0');
				const seconds = String(now.getSeconds()).padStart(2, '0');
				this.time = `${year}-${month}-${day}`;
			},
			Open() {
				this.$refs.timeShow.show();
			},
			timeClose() {
				this.$refs.timeShow.hide();
			},
			starTimes(e) {
				this.time = `${e.year}-${e.month}-${e.day}`;
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 17rpx 34rpx;

		.stick {
			position: sticky;
			top: 0;
			background-color: #fff;

			.time {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 28rpx 22rpx;

				.title {}

				.icon {
					width: 13rpx;
					height: 24rpx;
					display: flex;
					align-items: center;

					image {
						width: 13rpx;
						height: 24rpx;
					}
				}
			}
		}

		.table {
			background-color: #1EB481;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1.5fr 2fr;
			border-radius: 5rpx 5rpx 0rpx 0rpx;

			.item {
				color: #fff;
				border-right: 2rpx solid #c6c6c61f;
				padding: 18rpx 14rpx 16rpx 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.item:last-child {
				border-right: unset;
			}
		}

		.list {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1.5fr 2fr;
			height: 60rpx;

			.type {
				border-right: 2rpx solid #c6c6c61f;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.name {
				border-right: 2rpx solid #c6c6c61f;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.attendance {
				border-right: 2rpx solid #c6c6c61f;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.overtime {
				border-right: 2rpx solid #c6c6c61f;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.basic {
				border-right: 2rpx solid #c6c6c61f;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.commission {
				border-right: 2rpx solid #c6c6c61f;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #1EB481;
			}

			.salary {
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.list:nth-child(odd) {
			background-color: #D7FFF1;
		}
	}
</style>